<template>
    <div class="nav-aside">
        <div class="nav-aside-main">
            <div>
                <div class="aside-main-item" @click="toPage(0)">
                    <el-image :src="require('./images/index.png')" v-show="active != 0"></el-image>
                    <el-image :src="require('./images/index-g.png')" v-show="active == 0"></el-image>
                    <div><span>首页</span></div>
                </div>
                <div class="aside-main-item" @click="toPage(1)">
                    <el-image :src="require('./images/share.png')" v-show="active != 1"></el-image>
                    <el-image :src="require('./images/share-g.png')" v-show="active == 1"></el-image>
                    <div><span>分享</span></div>
                </div>
                <div class="aside-main-item" @click="toPage(2)">
                    <el-image :src="require('./images/index.png')" v-show="active != 2"></el-image>
                    <el-image :src="require('./images/index-g.png')" v-show="active == 2"></el-image>
                    <div><span>回收站</span></div>
                </div>
                <div class="aside-main-item" @click="toPage(3)">
                    <el-image :src="require('./images/index.png')" v-show="active != 3"></el-image>
                    <el-image :src="require('./images/index-g.png')" v-show="active == 3"></el-image>
                    <div><span>公共文件</span></div>
                </div>
                <div class="aside-main-item" @click="toPage(4)">
                    <el-image :src="require('./images/message.png')" v-show="active != 4"></el-image>
                    <el-image :src="require('./images/message-g.png')" v-show="active == 4"></el-image>
                    <div><span>联系人</span></div>
                </div>
            </div>
            <div class="aside-main-bottom">
                <!-- 底部 -->
            </div>
        </div>
        <div class="aside-sub">
            <div v-show="active == 0">
                <div class="aside-sub-item" @click="choiceSubFNav(0)"
                    :class="subfActive == 0 ? 'aside-sub-item-active' : ''">
                    <span>全部</span>
                </div>
                <div class="aside-sub-item" @click="choiceSubFNav(1)"
                    :class="subfActive == 1 ? 'aside-sub-item-active' : ''">
                    <span>视频</span>
                </div>
                <div class="aside-sub-item" @click="choiceSubFNav(2)"
                    :class="subfActive == 2 ? 'aside-sub-item-active' : ''">
                    <span>音频</span>
                </div>
                <div class="aside-sub-item" @click="choiceSubFNav(3)"
                    :class="subfActive == 3 ? 'aside-sub-item-active' : ''">
                    <span>图片</span>
                </div>
                <div class="aside-sub-item" @click="choiceSubFNav(4)"
                    :class="subfActive == 4 ? 'aside-sub-item-active' : ''">
                    <span>文档</span>
                </div>
                <div class="aside-sub-item" @click="choiceSubFNav(5)"
                    :class="subfActive == 5 ? 'aside-sub-item-active' : ''">
                    <span>其他</span>
                </div>
            </div>
            <div v-show="active == 1">
                <div class="aside-sub-item" @click="choiceSubSNav(0)"
                    :class="subsActive == 0 ? 'aside-sub-item-active' : ''">
                    <span>分享记录</span>
                </div>
            </div>
            <div v-show="active == 2">
                <div class="aside-sub-item" @click="choiceSubTNav(0)"
                    :class="subtActive == 0 ? 'aside-sub-item-active' : ''">
                    <span>删除记录</span>
                </div>
            </div>
            <div v-show="active == 3">
                <div class="aside-sub-item" @click="choiceSubENav(0)"
                    :class="subeActive == 0 ? 'aside-sub-item-active' : ''">
                    <span>全部公共文件</span>
                </div>
                <div class="aside-sub-item" @click="choiceSubENav(1)"
                    :class="subeActive == 1 ? 'aside-sub-item-active' : ''">
                    <span>我的公共文件</span>
                </div>
            </div>
            <div v-show="active == 4">
                <div class="aside-sub-item" @click="choiceSubCNav(0)"
                    :class="subcActive == 0 ? 'aside-sub-item-active' : ''">
                    <span>消息</span>
                </div>
                <div class="aside-sub-item" @click="choiceSubCNav(1)"
                    :class="subcActive == 1 ? 'aside-sub-item-active' : ''">
                    <span>通讯录</span>
                </div>
            </div>
            <div class="use-space">
                <MyProgress :use="spaceInfo.useSpace" :total="spaceInfo.totalSpace" class="progress"></MyProgress>
            </div>
        </div>
    </div>
</template>

<script>
import { getItem } from "@/utils/cookieUtil"
import MyProgress from "@/components/my-progress"
export default {
    name: "nav-aside",
    components: {
        MyProgress
    },
    data() {
        return {
            active: 0,
            subfActive: 0,
            subsActive: 0,
            subtActive: 0,
            subeActive: 0,
            subcActive: 0,
        }
    },
    mounted() {
        this.$bus.$on("busSpaceInfo", () => {
            this.getSpaceInfo()
        })
        this.judgeRoute()
    },
    methods: {
        toPage(index) {
            if (index == 0) {
                this.active = 0;
                this.subfActive = 0;
                this.$router.push('/disk/home?category=0');
            }
            else if (index == 1) {
                this.active = 1;
                this.subsActive = 0;
                this.$router.push('/disk/share');
            }
            else if (index == 2) {
                this.active = 2;
                this.subtActive = 0;
                this.$router.push('/disk/recycle');
            }
            else if (index == 3) {
                this.active = 3;
                this.subeActive = 0;
                this.$router.push('/disk/public?category=0');
            }
            else if (index == 4) {
                this.active = 4;
                this.subcActive = 0;
                this.$router.push('/disk/im/message');
            }
        },
        choiceSubFNav(index) {
            this.subfActive = index;
            this.$router.push('/disk/home?category=' + index);
        },
        choiceSubSNav(index) {
            this.subsActive = index;
        },
        choiceSubTNav(index) {
            this.subtActive = index;
        },
        choiceSubENav(index) {
            this.subeActive = index;
            this.$router.push('/disk/public?category=' + index);
        },
        choiceSubCNav(index) {
            this.subcActive = index;
            if (index == 0) this.$router.push('/disk/im/message');
            else if (index == 1) this.$router.push('/disk/im/contacts');
        },
        judgeRoute() {
            let path = this.$route.path
            if (path == "/disk/home") this.active = 0
            else if (path == "/disk/share") this.active = 1
            else if (path == "/disk/recycle") this.active = 2
            else if (path == "/disk/public") this.active = 3
        },
        async getSpaceInfo() {
            // 如果没登陆就不用请求内存
            if (!getItem('token')) {
                return
            }
            let res = await this.$store.dispatch('getSpace')
            if (!res.success) this.$global.resError(res)
        },
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo || {}
        },
        spaceInfo() {
            return this.$store.state.user.spaceInfo || {}
        }
    },
    beforeDestroy() {
        this.$bus.$off('busSpaceInfo')
    }

}
</script>

<style scoped>
.nav-aside {
    height: 100%;
    display: flex;
}

.nav-aside-main {
    display: flex;
    flex-direction: column;
    width: 80px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .06);
    text-align: center;
}

.aside-main-item {
    font-size: 12px;
    margin: 20px 0;
    cursor: pointer;
}

::v-deep .aside-main-item img {
    width: 36px;
    height: 36px;
}

.aside-sub {
    width: 200px;
    border-right: 1px solid #f1f2f4;
    padding-top: 20px;
    position: relative;
}

.aside-sub-item {
    text-align: center;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    color: #000;
    cursor: pointer;
}

.aside-sub-item-active {
    color: #409EFF !important;
    background-color: rgb(250, 250, 252) !important;
}

.use-space {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

.progress {
    width: 80%;
    margin: 0 auto;
}
</style>